{% extends "layout.html" %}
{% block head_extra %}
	<link rel="stylesheet" type="text/css" href="/static/css/timer-main.css" />
{% endblock %}
{% block title %} AllowTimer {% endblock %}
{% block body %}
	<div id="main">
		<div>
			{%if login_data%}
			<img src="{{login_data.avatar}}&s=40"/><a href="/timer/record/{{login_data.email}}">{{login_data.email}}</a> <a href="{{url_for('timer.logout')}}">logout</a>
			{%else%}
			<a href="{{oauth_url}}"><img src="/static/images/github32px.png"/> <b>Github Login</b></a>
			{%endif%}
		</div>
		<div id="control">
			<div class="hidden-xs">
				<h2 id="title">Alloy Timer</h2>
				<h5 id="subTitle">之番茄工作法</h5>
			</div>
			<div id="remainTime" class="remainTime">25:00</div>
			<div id="progressBarBox" class="progress progress-striped">
				<div id="progressBar" class="progress-bar"></div>
			</div>
			<div id="currentTask"></div>
			
			<textarea class="form-control" id="taskName" rows="1" title="请输入任务...">请输入任务...</textarea>
			<div class="row">
				<div class="col-md-12">
					<button id="startWorkButton" class="btn btn-primary">开始工作</button>
					<button id="startRestButton" class="btn btn-warning">开始休息</button>
					<button id="stopButton" class="btn btn-danger disabled">停止</button>
				</div>
			</div>
		</div>
		<div id="more">
			<button id="introButton" class="btn btn-info">番茄工作方法</button>
			<div id="introBoard">
				<h4>番茄工作法：最简单有效的时间管理方式</h4>
				<ol id="introList">
					<li>输入一个任务，将番茄时间设为25分钟点【开始工作】</li>
					<li>专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起</li>
					<li>然后短暂休息一下，5分钟左右</li>
				</ol>
				<a href="http://baike.baidu.com/view/5259318.htm" target="_blank">详细...</a>
			</div>
			<button id="settingButton" class="btn btn-info">设置</button>
			<ul id="settingBoard" class="form-inline">
				<li>
					<label>
						<span id="loopCheckboxText">自动循环</span>
						<input id="isLoopCheckbox" type="checkbox" />
					</label>
				</li>
				<li>
					<span id="workTimeText">工作时长</span>
					<input id="workTime" type="text" value="25" title="上下拖拽或者上下按键也可以改变值" />
				</li>
				<li>
					<span id="restTimeText">休息时长</span>
					<input id="restTime" type="text" value="5" title="上下拖拽或者上下按键也可以改变值" />
				</li>
			</ul>
			
			<button id="taskListButton" class="btn btn-info">任务记录</button>
			<div id="taskListBoard">
			<button id="clearTaskListButton" class="btn btn-danger">清空记录</button>
			<ul id="taskList"></ul>
		</div>

		<button id="test" class="btn btn-danger">Test</button>
		<script>
		$("#test").click(function(){
			$.post('/timer/add_record', {'mission': "imy你好", 'done': true}, function(e){
				console.log(e);
				return true;
			});
		});
		</script>
		
	</div>
	
	<div class="copyright">Copyright &copy; <script>document.write(new Date().getFullYear());</script> <a href="http://www.AlloyTeam.com/" target="_blank">Tencent AlloyTeam</a>. All Rights Reserved.</div>
</div>

<script src="/static/js/jquery.fittext.js"></script>
<script>
	$("#remainTime").fitText(0.35);
</script>

<script src="/static/js/jx/jx.core.js"></script>
<script src="/static/js/jx/jx.base.js"></script>
<script src="/static/js/jx/jx.browser.js"></script>
<script src="/static/js/jx/jx.dom.js"></script>
<script src="/static/js/jx/jx.event.js"></script>

<script src="/static/js/jx/jx.format.js"></script>
<script src="/static/js/jx/jx.date.js"></script>
<script src="/static/js/jx/jx.json.js"></script>
<script src="/static/js/jx/jx.swfobject.js"></script>
<script src="/static/js/jx/jx.sound.js"></script>
<script src="/static/js/alloy.timer.js"></script>

{% endblock %}
